<template>
  <div class="regist">
    <div class="idnum">
      <span>账号：</span>
      <i class='iconfont icon-zhanghaoshezhi'></i>
      <input type="text"
             placeholder="请输入账号"
             v-model="username">
    </div>
    <div class="password">
      <span>密码：</span>
      <i class="iconfont icon-221yonghu_mima_yuechi"></i>
      <input type="password"
             placeholder="请输入密码"
             v-model="password">
    </div>
    <div class="btn">
      <button class="btn1"
              @click="regist">注册</button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: 'Regist',
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    regist () {
      const url = 'http://localhost:8081/regist';
      var params = new URLSearchParams();
      params.append('username', this.username);
      params.append('password', this.password);
      this.$axios({
        method: "post",
        url: url,
        data: params,
      }).then(res => {
        console.log(res);
        if (res.data.code == 404) {
          // alert(res.data.msg);
          Dialog.alert({
            message: res.data.msg,
          }).then(() => {
            // on close
          });
        } else {
          // alert(res.data.msg);
          Dialog.alert({
            message: res.data.msg,
          }).then(() => {
            // on close
          });
          this.$router.push({ name: 'Login' });
        }
      }).catch(err => console.log(err));
    }
  },
}
</script>

<style lang="less">
.regist {
  height: 667px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f2f2f2;
  span {
    font-size: 20px;
  }
  .iconfont {
    font-size: 20px;
    color: #3190e8;
    position: absolute;
    left: 65px;
    top: 15px;
  }
  input {
    width: 260px;
    height: 50px;
    outline: none;
    border: 1px solid #aaff;
    border-radius: 5px;
    padding: 25px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .idnum {
    margin: 50px 0 20px;
    position: relative;
  }
  .password {
    margin-bottom: 20px;
    position: relative;
  }
  .btn {
    margin-bottom: 20px;
    .btn1 {
      height: 50px;
      width: 150px;
      font-size: 16px;
      color: white;
      border: 1px solid #aaff;
      border-radius: 5px;
      background-color: #3190e8;
    }
  }
}
</style>